<div class="content">
    <textarea  id="pre">
        //基于colorui的modal组件
        //支持点击蒙版区域关闭
        <template>
            <view class="cu-modal" :class="{'show':show}">
                <view v-if="canClick" class="dialog-bg" @tap="_hide">
                </view>
                <view v-else class="dialog-bg">
                </view>
                <view class="cu-dialog" :style="{width:width,'border-radius':radius}">
                    <view v-if="showTitle" class="dialog-title">
                        <slot name="title">
                            {{title}}
                        </slot>
                    </view>
                    <!-- 内容s -->
                    <view class="dialog-content">
                        <slot name="content">
                            {{content}}
                        </slot>
                    </view>
        
                    <!-- 内容e -->
                    <!-- 底部 s-->
                    <view class="dialog-footer">
                        <slot name="footer">
                            <!-- 单个确认按钮 -->
                            <view class="btns" v-if="single">
                                <view @tap="confirmEmit" class="confirm-btn" :style="{width:'100%',background:confirmBg}">确认
                                </view>
                            </view>
                            <!-- 单个确认按钮 -->
                            <!-- 双个按钮 -->
                            <view class="btns" v-else>
                                <view @tap="concelEmit" class="cancel-btn" :style="{background:cancelBg}">取消</view>
                                <view @tap="confirmEmit" class="confirm-btn" :style="{background:confirmBg}">确认</view>
                            </view>
                            <!-- 双个按钮 -->
                        </slot>
                    </view>
        
                    <!-- 底部 e-->
                </view>
        
            </view>
        </template>
        
        <script>
            export default {
                props: {
                    width: {
                        type: String,
                        default: '80%'
                    },
                    radius: {
                        type: String,
                        default: '10rpx'
                    },
                    canClick: {
                        type: Boolean,
                        default: false
                    },
                    showTitle: {
                        type: Boolean,
                        default: false
                    },
                    content: {
                        type: String,
                        default: ''
                    },
                    single: {
                        type: Boolean,
                        default: false
                    },
                    confirmBg: {
                        type: String,
                        default: 'olivedrab'
                    },
                    cancelBg: {
                        type: String,
                        default: 'gray'
                    }
                },
                data() {
                    return {
                        show: false
                    }
                },
                methods: {
                    _hide() {
                        if (this.show) {
                            this.show = false;
                        }
                    },
                    _show() {
                        this.show = true;
                    },
                    confirmEmit() {
                        this.$emit('confirm', 2)
                        this._hide();
                    },
                    concelEmit() {
                        this.$emit('cancel', 1)
                        this._hide();
                    }
                }
            }
        </script>
        
        <style>
            .dialog-bg {
                width: 100%;
                height: 100vh;
                position: fixed;
                top: 0;
                left: 0;
            }
        
            .dialog-footer .btns {
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 28rpx;
            }
        
            .dialog-footer .btns>view {
                border-radius: 8rpx;
                margin: 0 20rpx;
                padding: 8rpx 25rpx;
            }
        
            .dialog-footer .confirm-btn {
                color: #fff;
            }
        
            .dialog-footer .cancel-btn {
                color: #000;
            }
        </style>
        
    </textarea>
</div>